<template>
<div class="page-view">
    <div class="releaseBox">
        <main-wrap 
            :loading="true" 
             ref="mianEle" 
            :load="onLoad" 
            :end="page.finished" 
            :noFixed="true" 
             bodyBg="none"
            :showOverTxt="dataList.length>0" 
            :pageIndex="page.pageIndex">
            <template v-slot:header>
                <div class="adheader">
                    <div class="hcon">
                        <div class="shopLetfTop">
                            <b>{{total}}</b> In Total  
                             <span @click="btnAdd" class="btn-add"></span>
                        </div>
                        <div class="topSearch">
                            <div class="tswd">
                                <my-search v-model="keyword" @onSearch="resetScroll"/>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
               <table  class="table-view">
                    <thead>
                        <th class="z-left">Client's Name</th>
                        <th>Ad Space</th>
                        <th > Rewarded  <img  src="/images/adRelease/t-header.png" alt=""/></th>
                        <th>Flow </th>
                        <th>Create Time</th>
                        <th class="z-right"></th>
                    </thead>
                    
                    <tr v-for="(item,index) in dataList" :key="item.id">
                        <td>
                        <div class="name">{{item.customerName}}</div>
                        </td>
                        <td>
                        <div class="cpc">{{item.adPlaceNum}}</div>
                        </td>
                        <td>{{item.rewardAmount.standardString}}</td>
                        <td>UV <span class="cpc">{{item.uv}}</span> PV <span class="cpc">{{item.pv}}</span></td>
                        <td>{{getTime(item.createTime)}}</td>
                        <td class="btn-view">
                            <div class="btn-delete" v-if="item.adPlaceNum==0" @click="btnDel(item,index)"></div>
                        </td>
                    </tr>
               </table>
                 <empty v-if="page.finished && dataList.length<1"/>
          </main-wrap>

    <div class="popup-view" v-if="popupType">
       <div class="title">Create Customer<div class="close"  @click="cancelConfim"></div>  </div>
       <div class="ipt-view">
          <div class="label">Client's name</div>
            <input type="text" v-model="saveFrom.customerName" placeholder="Please fill in the consignee's name" />
       </div>
       
       <div class="ipt-view next-view">
          <div class="label">METADO wallet address</div>
            <input type="text" v-model="saveFrom.customerWalletAddress" placeholder="Please fill in the customer's METADO wallet address" />
       </div>
       <div class="btn-view">
          <!-- <div class="btn-cancel" @click="cancelConfim"></div> -->
           <div class="btn-confim" @click="popupConfim"></div> 
       </div>
    </div>
    </div>
</div>
</template>
<script>
import { reactive,toRefs,getCurrentInstance,computed,onMounted,onBeforeUnmount } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import mainWrap from '@/components/mainWrap.vue'
import confirm from '@/utils/confirm.js'
import mySearch from '@/components/mySearch.vue'
import {toast,myOverlay} from '@/utils/common.js'
import empty from '@/components/empty.vue'
import moment from 'moment'
moment.locale('zh-cn')
export default {
    components:{mainWrap,mySearch,empty},
    props:{},
    setup(props,context){
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
            dataList:[],
            total:0,
            page:{
                pageIndex:1,
                pageSize:8,
                finished: false,
                loading:false
            },
            popupType:false,
            keyword:'',
             st1:'',
             st2:'',
            saveFrom:{
                "customerName": "",
                "customerWalletAddress": "",
                "walletAddress":store.state.base.userInfo.walletAddress
            }
        })
        onMounted(()=>{
          // getPageList()
             myOverlay.open()
            state.st1 = setTimeout(()=>{onLoad()},100)
        })
         onBeforeUnmount(()=>{  // 销毁组件
            myClearTimeOut()
        })

        const myClearTimeOut = ()=>{
            clearTimeout(state.st1)
        }
        const uniqueFunc=(arr, uniId)=>{
          const res = new Map();
          return arr.filter((item) => !res.has(item[uniId]) && res.set(item[uniId], 1));
        }
        const btnAdd = ()=>{
            state.popupType = true
        } 
        const cancelConfim = ()=>{ 
            state.popupType = false
        }
        const popupConfim = ()=>{ 
            if(state.saveFrom.customerName==''){
                toast("Customer's name is unique")
                return
            }
            if(state.saveFrom.customerWalletAddress==''){
                toast("METADO wallet address is unique")
                return
            }
            store.dispatch('customer/add_customer_list',state.saveFrom).then(res =>{
                if(res.success==true){
                   toast('success')
                   resetScroll()
                   cancelConfim()
                   state.saveFrom.customerName=''
                   state.saveFrom.customerWalletAddress=''
                }else{
                     toast('fail')
                }
             })
        }

        const btnDel = (item,index)=>{ //一键取消
            confirm({ text: 'Please confirm whether to delete the customer' }).then(() => {
            store.dispatch('customer/del_customer_list',item.customerId).then(res =>{
                  if(res.success==true){
                   toast('success')
                   resetScroll()
                }else{
                     toast('fail')
                }
             })
            }).catch(e => {
            })
        }

        const getTime = (value)=>{
            return moment(value).format('YYYY-MM-DD')
        }
       
        const resetScroll = async()=>{
            myOverlay.open()
            proxy.$refs.mianEle.stopScroll()
            state.dataList=[]
            state.page.pageIndex=1
            state.page.finished=false
            await onLoad()
            proxy.$refs.mianEle.initScroll()
        }
        const onLoad = ()=> {
            return new Promise((resolve, reject) => {
                state.st2 = setTimeout(async () => {
                    const res = await store.dispatch('customer/get_customer_list', {
                        limit: state.page.pageSize,
                        customerName:state.keyword,
                        orderField: "",
                        orderType: "",
                        page: state.page.pageIndex,
                        walletAddress: state.userInfo.walletAddress
                    });

                     state.dataList =uniqueFunc(res.data.concat(state.dataList),'customerId') 
                    state.page.pageIndex++;
                    state.total = res.total
                    if (state.dataList.length >= res.total) {
                        state.page.finished = true;
                    }
                    myOverlay.close()
                    resolve(true);
                }, 500);
            });
        }
        return{
            ...toRefs(state),
            uniqueFunc,
            btnDel,
            onLoad,
            resetScroll,
            btnAdd,
            cancelConfim,
            popupConfim,
            getTime
        }
    }
}
</script>

<style lang="scss" scoped>
    .page-view{
        width:100%;
        height:100%;
    }
       .adheader{
         padding: 0px 30px 15px 0;
        .hcon{
            display: flex;
            height: 60px;
            line-height: 60px;
            align-items: center;
            font-family: Inter-Medium, Inter;
            .shopLetfTop{
                padding: 0;
                font-weight: 500;
                font-size: 28px;
                font-family: Inter-Medium, Inter;
                display: flex;
                align-items: center;
                align-self: center;
                b{
                    color: #82FEF4;
                    margin-right:10px;
                }
                .btn-add{
                    background-image: url(/images/adRelease/minadd.png);
                    background-size: 100% 100%;
                    height:48px;
                    width:48px;
                    background-position: center;
                    background-repeat: no-repeat;   
                    padding:24px;
                    margin-left: 30px;
                }
            }
            .topSearch{
                flex: 1;
                // display: flex;
                // justify-content: end;
                .tswd{
                    float:right;
                    width: 550px;
                }
            }
        }
    }
    .releaseBox{
        height:100%;
        width:100%;
      .table-view{
        border: none;
        border-collapse: collapse;
        margin:auto 0;
        display: table;
         width: 100%;
        thead{
             th{
                background-color: #2C5BA9;
             }
             .z-left{
               background: linear-gradient(45deg, transparent 10px, #2C5BA9 6px, #2C5BA9);
             }
             .z-right{
               background: linear-gradient(225deg, transparent 10px, #2C5BA9 6px, #2C5BA9);
             }
        }
        th{
            color:#ffffff50;
            font-size:22px;
            height:50px;
            line-height:50px;
            padding:4px 20px;
            font-family: Poppins-Medium;
            img{
                height:18px;
                margin-left:6px;
                vertical-align: middle;
            }
        }
        tr{
             border-bottom:1px solid #ffffff15;
        }
        td{
            padding:30px 20px;
            font-size:24px;
            font-family: Poppins-Medium, Poppins;
                .name{
                    font-size:24px;
                    color: #67F8FF;
                }
             .strtime,
                .endtime{
                    font-size:22px;
                    color:#fff;
                }
                .cpc{
                    font-size:24px;
                    color:#FF6600;
                    font-weight: bold;
                    min-width:140px;
                    text-align: left;
                }
                .amount{
                    font-size:28px;
                    color:#fff;
                }
                .arrow-down {
                    height:0; 
                    border-left:10px solid transparent;
                    border-right:10px solid transparent;
                    border-top:10px solid #67F8FF;
                    width:10px;
                    margin:0 auto;
                }
             }
        td.btn-view{
            display: flex;
            .btn-edit,
            .btn-delete{
                background-image: url(/images/adRelease/edit.png);
                background-size: 100% 100%;
                height:60px;
                width:160px;
                margin-right:20px;
                background-position: center;
                background-repeat: no-repeat;
            }
             .btn-delete{
              background-image: url(/images/adRelease/delete.png);
             }
        }
      }
    }
     .popup-view{
        height:460px;
        width:680px;
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-340px;
        margin-top:-180px;
         background-image: url(/images/dgbg11.png);
         background-position: center;
         background-size: 100% 100%;
         background-repeat: no-repeat;
         padding:40px;
         .title{
            color:#fff;
            font-size:24px;
            font-family: Poppins-Medium;
            margin-bottom:30px;
            position: relative;
         }
         .close{
            background-image: url(/images/adRelease/close.png);
            background-position: center;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            height: 30px;
            width:30px;
            position: absolute;
            right:0;
            top:0;
         }
         .ipt-view{
            margin-bottom:10px;
            .label{
                margin-right:10px;
                font-size:24px;
                color:#fff;
            }
            input{
                width:100%;
                border:1px solid #67F8FF;
                background-color: #67F8FF50;
                height:60px;
                line-height:60px;
                font-size:24px;
                padding:0 20px;
            }
            input::-webkit-input-placeholder {
                color : #fff;
            }

            :-moz-placeholder {
                color : #fff;
            }

            ::-moz-placeholder {
                color : #fff;
            }

            input:-ms-input-placeholder {
                color : #fff;
            }

            input::-ms-input-placeholder {
                color : #fff;
            }
         }
         .btn-view{
            display: flex;
            .btn-confim,
            .btn-cancel{
                 background-image: url(/images/adRelease/grid-cancel.png);
                background-position: center;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                height:60px;
                width:160px;
                margin-top:20px;
            }
            .btn-confim{
                background-image: url(/images/adRelease/btn-confim.png);
            }
         }
         .next-view{
            margin-top:20px;
         }
    }
</style>